<div class="form-group" data-bind="validationElement: connectionStringName">
    <label class="control-label">Name<i class="required"></i></label>
    <div class="flex-grow">
        <input class="form-control" data-bind="textInput: connectionStringName, enable: isNew, attr: { 'title': isNew() ? 'Enter any name of your choice for this connection string' : '' }"
               placeholder="Enter a name for the connection string" />
    </div>
</div>
<div class="form-group" data-bind="validationElement: database">
    <label class="control-label">Database<i class="required"></i></label>
    <div class="flex-grow">
        <input class="form-control" data-bind="textInput: database, enable: !isServerWide()" placeholder="Enter database for the connection string" title="Destination database" />
    </div>
</div>
<div class="form-group" data-bind="validationElement: inputUrl().discoveryUrlName, visible: !isServerWide()"> 
    <label class="control-label">Discovery URLs<i class="required"></i></label>
    <div class="flex-grow"> 
        <input class="form-control" placeholder="Enter discovery url to add" data-bind="textInput: inputUrl().discoveryUrlName" />
    </div>
    <button class="btn btn-info" 
            data-bind="click: addDiscoveryUrlWithBlink, enable: inputUrl().discoveryUrlName() && inputUrl().validationGroup.isValid()">
        <i class="icon-plus"></i><span>Add URL</span>
    </button> 
</div>
<div class="form-group" data-bind="visible: topologyDiscoveryUrls().length && !isServerWide()">
    <label class="control-label">&nbsp;</label>
    <div class="flex-grow">
        <ul class="well collection-list" data-bind="foreach: topologyDiscoveryUrls">
            <li>
                <div class="name" data-bind="text: $data.discoveryUrlName"></div>
                <div class="text-warning margin-top margin-top-xs" data-bind="if: hasTestError" title="Connection test failed!">
                    <i class="icon-warning"></i>
                </div>
                <a title="Remove url" href="#"
                   data-bind="click: $parent.removeDiscoveryUrl.bind($parent, $data)">
                    <i class="icon-trash"></i>
                </a>
                <a class="btn btn-default" title="Test url connection" href="#"
                   data-bind="click: _.partial($root.onTestConnectionRaven, $data), disable: $root.spinners.test,
                              css: { 'btn-spinner': $root.spinners.test() && $parent.selectedUrlToTest() === $data.discoveryUrlName() }">
                    <i class="icon-rocket"></i>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="form-group" data-bind="visible: topologyDiscoveryUrls().length && isServerWide()">
    <label class="control-label">Discovery URLs</label>
    <div class="flex-grow">
        <ul class="well collection-list" data-bind="foreach: topologyDiscoveryUrls">
            <li>
                <div class="name" data-bind="text: $data.discoveryUrlName"></div>
            </li>
        </ul>
    </div>
</div>
<div class="form-group" data-bind="if: !topologyDiscoveryUrls.isValid()">
    <label class="control-label">&nbsp;</label>
    <span data-bind="validationElement: topologyDiscoveryUrls">
        <span class="help-block" data-bind="validationMessage: topologyDiscoveryUrls"></span>
    </span>
</div>
